﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>题库</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="题库">
	<meta name="apple-mobile-web-app-capable" content="题库">
	<meta name="apple-touch-fullscreen" content="题库">
	<meta name="HandheldFriendly" content="题库">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/normalize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.carousel.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.theme.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.transitions.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/fakeLoader.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/style.css">
	<style>
		.form-field{
			color: #000000;
			font-size: 16px;
			line-height: 32px;
			font-weight: bold;
		}
		.add {
			display: inline-block;
			width: 76px;
			height: 76px;
			color: #ccc;
			border: 2px dashed #C9CACA;
			border-radius: 10px;
			text-indent: -12em;
			transition: color .25s;
			position: relative;
			overflow: hidden;
		}
		.add:hover {
			color: #34538b;
		}
		.add::before, .add::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
		}
		.add::before {
			width: 20px;
			border-top: 4px solid;
			margin: -1px 0 0 -10px;
		}
		.add::after {
			height: 20px;
			border-left: 4px solid;
			margin: -10px 0 0 -2px;
		}
	</style>
</head>
<body>
<!-- contact us -->
<div class="pages" style="margin-top: 0;">
	<div class="container" style="margin-top: 20px;">
		<div class="contact-us">
			<div class="row">
				<#list exam as item>
				<div class="form-group" style="margin-left: 10px;">
					<label class="form-field">${item.title} <#if (item.type==2)><span style="color: #999999;font-weight: 100;">(多选)</span></#if></label>
					<#if item.optionsDTOList??>
						<#list item.optionsDTOList as option>
							<p style="margin-left: 10px;">
								<#if (item.type==1)>
								<input type="radio" class="with-gap" id="answer-${item.id}-${option.id}" name="${item.title}" value="${option.value}">
								<#else>
								<input type="checkbox" class="with-gap" id="answer-${item.id}-${option.id}" name="${item.title}" value="${option.value}">
								</#if>
								<label for="answer-${item.id}-${option.id}"><span>${option.title}</span></label>
							</p>
						</#list>
					<#else>
					</#if>
				</div>
				</#list>

				<div class="form-group">
					<button class="btn button-default" type="button" onclick="submitAnswer()">立即提交</button>
				</div>

			</div>
		</div>
	</div>
</div>
</div>
<!-- end contact us -->

<!-- loader -->
<div id="fakeLoader"></div>
<!-- end loader -->

<!-- scripts -->
<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
<script src="${request.contextPath}/statics/js/contact-form.js"></script>
<script src="${request.contextPath}/statics/js/main.js"></script>

<script>
	function submitAnswer(){
		var answer = [];

		// 选择所有radio
		var radios = $('input[type="radio"]');
		console.log("页面中共有" + radios.length + "个radio");
		radios.each(function() {
			var id = $(this).attr("id");
			var val = $(this).val();
			// 判断是否选中
			var isChecked = $(this).prop('checked');
			if(isChecked){
				var item = {key: id, val: val}
				answer.push(item);
			}
		});

		var checkboxs = $('input[type="checkbox"]');
		console.log("页面中共有" + checkboxs.length + "checkbox");
		checkboxs.each(function() {
			var id = $(this).attr("id");
			var val = $(this).val();
			var item = {key: id, val: val}
			// 判断是否选中
			var isChecked = $(this).prop('checked');
			if(isChecked){
				var item = {key: id, val: val}
				answer.push(item);
			}
		});

		console.log(JSON.stringify(answer));

		$.ajax({
			type: 'GET',
			url: '${request.contextPath}/h5/submitAnswer',
			data: {
				id: '${id}',
				answers: JSON.stringify(answer)
			},
			//  默认情况下，标准的跨域请求是不会发送cookie的
			beforeSend: function (xhr) {
				xhr.withCredentials = true
			},
			success: function (res) {
				console.log(res);
				if(res.code === 0){
					alert("提交成功");
					window.location.href="${request.contextPath}/h5/exam-list";
				}else{
					alert(res.msg);
				}
			}
		})
	}
</script>

</body>
</html>
